<template>
  <div>
    <Card>
      <div class="step-content-title">
        <Steps :current="current" style="margin-bottom: 30px;">
          <Step title="选择审批类型"></Step>
          <Step title="填写申请单"></Step>
          <Step title="提交完成"></Step>
        </Steps>
        <!-- 选择审批类型 -->
        <div v-if="current==0" style="margin-bottom:350px">
          <Row :gutter="80" class="listgroup">
            <div @click="nextStep('1')">
              <i-col span="8">
                <Card :class="isPerson?'step-card-1':'stepCard'">
                  <Icon type="md-person" :size="36" />请假申请
                </Card>
              </i-col>
            </div>
            <div @click="nextStep('2')">
              <i-col span="8">
                <Card :class="isPerson?'step-card-2':'stepCard'">
                  <Icon type="md-bus" :size="36" />外出申请
                </Card>
              </i-col>
            </div>
            <div @click="nextStep('3')">
              <i-col span="8">
                <Card :class="isPerson?'step-card-3':'stepCard'">
                  <Icon type="md-pin" :size="36" />补卡申请
                </Card>
              </i-col>
            </div>
          </Row>
        </div>
        <!-- 填写申请单 -->
        <div v-if="current==1">
          <leaveApply
            v-if="isLeaveApply"
            @currentChanged="currentChange($event)"
            :applyInfo="applyInfo"
          ></leaveApply>
          <outApply
            v-if="isOutApply"
            @currentChanged="currentChange($event)"
            :applyInfo="applyInfo"
          ></outApply>
          <remedyApply
            v-if="isRemedyApply"
            @currentChanged="currentChange($event)"
            :applyInfo="applyInfo"
          ></remedyApply>
        </div>
        <!-- 提交完成 -->
        <div v-if="current==2">
          <div class="submit-success1">
            <Icon type="ios-checkmark-circle" class="icon" />
            <div class="submit-success">提交成功</div>
            <div class="to">
              可前往【人员管理】-
              <a @click="toMyApplication">【我的申请】</a>查看提交的申请以及审批进度
            </div>
          </div>
          <div class="submit-success">
            <div class="submit-success-content">
              <div class="submit-success-content-title">审批流程</div>
              <div>
                <Timeline>
                  <TimelineItem :color="passedColor" v-for="(item,index) in timeLine1" :key="index">
                    <Icon
                      class="grayDiv"
                      style="background-color: rgba(24, 144, 255, 1)"
                      v-if="index < grade-tit+1"
                      slot="dot"
                      size="24"
                    ></Icon>
                    <Icon
                      class="grayDiv"
                      style="background-color: rgba(128, 128, 128, 1);"
                      v-else
                      slot="dot"
                      size="24"
                    ></Icon>
                    <div class="timeline-box">
                      <Row>
                        <i-col span="10">
                          <div class="timeline-item-title">{{item.title}}</div>
                          <div class="timeline-item-content">{{item.sum}}</div>
                        </i-col>
                        <i-col span="14" v-if="item.people">
                          <div
                            v-for="(people,index) in item.people"
                            :key="index"
                            style="float:right"
                          >
                            <div>
                              <Icon type="md-contact" size="44"></Icon>
                            </div>
                            <div
                              style="text-align:center"
                              class="timeline-item-content"
                            >{{people.name}}</div>
                          </div>
                        </i-col>
                      </Row>
                    </div>
                  </TimelineItem>
                </Timeline>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
import leaveApplyContent from "./leaveApply";
import outApplyContent from "./outApply";
import remedyApplyContent from "./remedyApply";

export default {
  components: {
    leaveApply: leaveApplyContent,
    outApply: outApplyContent,
    remedyApply: remedyApplyContent
  },
  data() {
    return {
      // resubmit: false,
      current: 0,
      applyType: "",
      remedyTotal: "",

      isLeaveApply: false,
      isOutApply: false,
      isRemedyApply: false,

      // 提交完成
      passedColor: "#1890FF", // 审批通过的颜色
      waitingColor: "#808080", // 等待审批的颜色
      timeLine1: [],
      grade: "",

      applyInfo: "",
      isPerson: true,
      currentType: '',
    };
  },
  methods: {
    // 下一步
    nextStep(type) {
      if(this.isPerson == false){
        return
      }
      if (type == "1") {
        this.isLeaveApply = true;
        this.isOutApply = false;
        this.isRemedyApply = false;
        this.currentType = "请假"
      }
      if (type == "2") {
        this.isLeaveApply = false;
        this.isOutApply = true;
        this.isRemedyApply = false;
        this.currentType = "外出"
      }
      if (type == "3") {
        this.isLeaveApply = false;
        this.isOutApply = false;
        this.isRemedyApply = true;
        this.currentType = "补卡"
      }
      this.current = 1;
    },

    // 提交后跳转到提交完成界面
    currentChange(current) {
      if (current == "2") {
        this.current = 2;
      } else if (current == "0") {
        this.current = 0;
      } else {
        let obj = {
          applyNo: current
        };
        // 审批流程
        this.api.getApplyInfo(obj).then(res => {
          if (res.code == 200 && res.data != null) {
            if (res.data.userFewVOS) {
              this.timeLine1 = res.data.userFewVOS;
            }
            let title = res.data.userFewVOS[0].title;
            this.grade = res.data.grade;
            if (title == "外勤") {
              this.tit = 1;
            } else if (title == "外勤主管") {
              this.tit = 2;
            } else if (title == "外勤部经理") {
              this.tit = 3;
            } else if (title == "支公司内勤") {
              this.tit = 4;
            } else if (title == "分公司内勤") {
              this.tit = 5;
            } else if (title == "总公司内勤") {
              this.tit = 6;
            }

            let agent = []
            for(let i=1;i<res.data.userFewVOS.length;i++){
              if(res.data.userFewVOS[i].people){
                for(let j=0;j<res.data.userFewVOS[i].people.length;j++){
                  agent.push(res.data.userFewVOS[i].people[j].agentcode)
                }                
              }

            }
            //20201215
            this.api.sendNotice({
              agentcode:agent[0], //还没加，待联调
              messageid:obj.applyNo,
              messagetype:this.currentType=='请假' ? '2' : (this.currentType=='外出' ? '3' : '4')
            }).then(res => {
              console.log(res)
            })

            this.api.pushOneUser({
              agentCode: agent[0],
              // id: this.infoList.id,
              templateType: '7',
              id: obj.applyNo,
              approveType: this.currentType=="外出" ? '1' : (this.currentType=="补卡" ? '2' : '3')
            }).then(res => {
              console.log(res)
            })
          } else {
            this.timeLine1 = [];
            this.$Message.error(res.msg);
          }

        });
      }
    },

    // 前往我的申请页面
    toMyApplication() {
      this.$router.push({
        path: "myApplication"
      });
    },

    // 重新提交跳到对应的页面
    resubmit() {
      if (this.applyInfo) {
        this.current = 1;
        this.isLeaveApply = this.applyInfo.isLeaveApply;
        this.isOutApply = this.applyInfo.isOutApply;
        this.isRemedyApply = this.applyInfo.isRemedyApply;
      }
    },

    // 初始化
    initialize() {
      this.api.getBackOffice().then(res => {
        if (res.code == 200 && res.data != null) {
          if (res.data.total <= 0) {
            // this.isPerson = false;
          }
        }
      });
    }
  },
  created() {},
  mounted() {
    // 重新提交跳转
    this.resubmit();
  },
  beforeMount() {
    this.applyInfo = this.$route.query.applyInfoPass;
    console.log("000",this.applyInfo)
    // 初始化
    this.initialize();
  },
  beforeDestroy() {
    this.current = null;
    this.applyType = null;
    this.remedyTotal = null;

    this.isLeaveApply = null;
    this.isOutApply = null;
    this.isRemedyApply = null;

      // 提交完成
    this.passedColor = null; // 审批通过的颜色
    this.waitingColor = null; // 等待审批的颜色
    this.timeLine1 = null;
    this.grade = null;

    this.applyInfo = null;
    this.isPerson = null;
    this.currentType = null;
  }
};
</script>
<style lang="less" scoped>
@import "./index";
</style>

<style>
.ivu-timeline-item-head-custom {
  width: 0;
  height: 0;
  left: -4px;
  top: -6px;
}
</style>
